$(function () {
    // 请求数据
    $.ajax({
        type: "GET",
        url: "http://localhost:8080/src/json/data2.json",
    }).then((res) => {
        let M = new Magnifier();
        M.getimages(res.data.images)
        M.bind()
        // 表格 
        // tablehtml(res.data.params)
        $(".lazy").lazyload()
        foor()
    });

    function Magnifier() {
        // 选择程序需要的数据(元素)
        this.small_img_ele = $(".box");
        this.big_img = $(".big img")
        this.big_img_ele = $(".big");
        this.focus_ele = $(".mo");
        // 计算container里面的位置信息; 
        this.container_ele = $(".left");

        this.img_list = [
            {
                small: "https://www.konka.com/public/images/b0/35/67/7fdecd66c5cf0d0017a77f2d86a696213edc1778.jpg?95971_OW800_OH800",
                big: "https://www.konka.com/public/images/30/0a/e0/f0b5b201d431d70f7c1c912484c7196272e1840b.jpg?95971_OW800_OH800"
            },
            {
                small: "./images/2.jpg",
                big: "./images/2.big.jpg"
            }
        ]

        this.container_offset = this.container_ele.offset()

        // 获取到焦点框的宽高; 
        // - 小任务 : 通过dom操作获取focus宽高; 
        // - 记得翻阅一下之前将 offsetWidth 和 offsetHeight 属性的注意事项， 就知道为什么取出的值为0了; 
        this.focus_size = {
            width: this.focus_ele.width(),
            height: this.focus_ele.height()
        }
    }
    Magnifier.prototype.bindEvent = function () {
        // 在面向对象程序之中我们不会吧原型方法直接作为事件处理函数; 
        // - 因为这样写的话，原型方法this指向不可控; 
        var mag = this;
        this.small_img_ele.mouseover(function () {
            // 调用显示隐藏功能; 
            mag.toggle("show");
        })
        this.small_img_ele.mouseout(function () {
            // 调用显示隐藏功能; 
            mag.toggle("hide");
        })
        this.small_img_ele.mousemove(function (e = event) {
            // 给程序当前鼠标的位置; 
            mag.focusMove(e.clientX, e.clientY);
            mag.bigImgMove();
        });
    }
    Magnifier.prototype.toggle = function (type) {
        switch (type) {
            case "show":
                this.big_img_ele.show()
                this.focus_ele.show();
                break;
            case "hide":
                this.big_img_ele.hide();
                this.focus_ele.hide()
                break;
        }
    }

    Magnifier.prototype.focusMove = function (x, y) {
        var _left = x - this.container_offset.left - this.focus_size.width / 2;
        // top 是关键字 ，不能直接用做变量名
        var _top = y - this.focus_size.height / 2
        // 边界检测 : 
        // 数值不能小于最小值, 数值也不能大于最大值; 
        // - 判断条件 ， 变量不能小于最小值，如果小于最小值我们就让他变为最小值; 
        // - 变量也不能大于最大值，如果大于最大值，那么我们就让他变为最小值; 
        if (_left < 0) {
            _left = 0;
        }
        if (_top < 0) {
            _top = 0;
        }
        if (_left > 250) {
            _left = 250;
        }
        if (_top > 250) {
            _top = 250;
        }

        this.focus_ele.css({
            left: _left,
            top: _top
        })

        this.prop_left = _left / 150;
        this.prop_top = _top / 150;
    }
    // 跨函数获取数据; 
    Magnifier.prototype.bigImgMove = function () {
        this.big_img.css({
            left: -this.prop_left * 250,
            top: -this.prop_top * 250
        })
    }
    var m = new Magnifier();
    m.bindEvent();


    //详情
    var $dd = $(".xinghao dd");
    $dd.click(function () {
        var index = $dd.index($(this));
        $dd.eq(index).addClass("active")
            .siblings().removeClass("active");
    })
    var $jia = $(".jia");
    var $jian = $(".jian");
    var $inp = $(".connt");
    $jia.click(function () {
        var index = Number($inp.val()) + 1;
        $inp.val(index)
    })
    $jian.click(function () {
        var index = Number($inp.val()) - 1
        $inp.val(index)
        console.log(1);
    })

    // 楼梯
    function foor() {
        let animate = false;
        let $floor = $(".floor li")
        let $title = $(".title");
        let $fllor = $(".fllor")
        let $foo = $(".foo li")
        let ttop = [];
        $.map($title, function (item) {

            var _top = $(item).offset().top
            ttop.push(parseInt(_top))
        })
        $foo.click(function () {
            if (animate) {
                return false;
            }
            animate = true
            var index = $foo.index($(this))
            ltop(index)
        })
        $floor.click(function () {
            if (animate) {
                return false;
            }
            var index = $floor.index($(this))
            ltop(index)
            animate = true
        })
        function ltop(index) {
            $("html,body").stop(true).animate({
                scrollTop: ttop[index] - 70
            }, function () {
                animate = false;
            });
        }
        $(window).scroll(function () {
            var scrollTop = $("html,body").scrollTop();
            for (let i = 0; i < $foo.length; i++) {
                if (scrollTop >= ttop[i]) {
                    $foo.eq(i).addClass("active")
                        .siblings("li")
                        .removeClass("active")
                }
            }
            if (scrollTop > ttop[0]) {
                $fllor.addClass("active")
            } else {
                $fllor.removeClass("active")
            }
        })
    }


})